<template>
    <view class="content">
        <view class="top">
			<image src="../../static/image/sta_1.png" class="sta-1"></image>
			<view>请核对您的预约信息，点击确认提交!</view>
		</view>
		<view class="box">
			<view class="item" v-if="data.mobile">
				<view class="i-left">预约电话</view>
				<view class="i-right">{{ data.mobile }}</view>
			</view>
			<view class="item">
				<view class="i-left">预约会员</view>
				<view class="i-right">
					{{data.nickname}}<text class="tip">({{data.thali}}<text v-if="data.is_sex_txt">--{{data.is_sex_txt}}</text>)</text>
				</view>
			</view>
			<view class="item">
				<view class="i-left">预约时间</view>
				<view class="i-right">{{data.subscribe_time}}</view>
			</view>
			<view class="item">
				<view class="i-left">体检机构</view>
				<view class="i-right">{{data.center}}</view>
			</view>
			<view class="item">
				<view class="i-left">体检地址</view>
				<view class="i-right">{{data.address}}</view>
			</view>
			<view class="item">
				<view class="i-left">{{data.pay_type_txt}}</view>
				<view class="i-right">
					¥{{data.pay_amount}}元
					<text class="tip line">(原价:¥{{data.original_price}})</text>
				</view>
			</view>
		</view>
		
		<view class="d-tip">
			<view class="u-p-b-10 text-bold">温馨提示：</view>
			<view class="tip">
				<u-parse :html="content.content"></u-parse>
			</view>
		</view>
		
		<view class="footer">
			<view class="u-flex">
				<view class="f-down-l">
					<view class="price">
						￥<text class="price-num">{{data.pay_amount}}</text>
					</view>
					<view>{{data.pay_type_txt}}</view>
				</view>
				<view class="f-down-r">
					<view class="line-price">￥<text>{{data.original_price}}</text></view>
					<view>门市价</view>
				</view>
			</view>
			<view class="f-btn" @click="doSubmit">立即支付</view>
		</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: {},
				subscribes_id: '',
				content: {},
            };
        },
        onLoad(option) {
            this.subscribes_id = option.subscribes_id
			this.getData()
			this.getContent()
        },
        methods: {
			doSubmit() {
				let data = {
					id: this.data.order_id,
					money: this.data.pay_amount,
					token: this.$getSync('userToken'),
				}
				this.$gTo(`/pages/pay/pay?data=${JSON.stringify(data)}`)
			},
			
            getData() {
            	this.$ajax('get_sub_detail', {
                    userToken: this.$getSync('userToken'),
            		subscribes_id: this.subscribes_id,
                }).then(ret => {
            		if (ret.status == 0) {
                        this.data = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
			
			getContent() {
				this.$ajax('get_content', {
			        type: 10,
					//3线上咨询服务协议 4上传体检报告温馨提示 5隐私协议 6如何上传体检报告 7极速问诊须知 
					//8体检须知 9体检项目提示 10体检预约温馨提示 11赠送亲友温馨提示 12会员服务协议
					//13购卡订单提示 14激活码开卡提示 15我要挂号须知
			    }).then(ret => {
					if (ret.status == 0) {
			            this.content = ret.data
					} else {
						this.$toast(ret.message);
					}
				});
			},
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
	.content{
		padding-bottom: 120rpx;
	}
	.top{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 30rpx;
		color: #fff;
		padding: 35rpx 38rpx;
		background-color: #01b6bc;
		margin-bottom: 25rpx;
	}
	.sta-1{
		width: 91rpx;
		height: 91rpx;
		margin-right: 20rpx;
	}
	.box{
		padding: 35rpx 20rpx 25rpx;
		margin: 0 20rpx 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
		font-size: 26rpx;
	}
	.i-left{
		color: #a6a6a6;
		padding-right: 25rpx;
	}
	.i-right{
		flex: 1;
		word-break: break-all;
		white-space: pre-line;
	}
	
	.line{
		text-decoration: line-through;
	}
	
	.d-tip{
		padding: 0 20rpx;
		font-size: 24rpx;
		color: #5c667b;
	}
	.tip{
		color: #a0a8b8;
	}
	
	.footer{
		width: 750rpx;
		padding: 18rpx 28rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
	}
	.f-down-l{
		font-size: 24rpx;
		color: #fe8928;
	}
	.price{
		font-size: 28rpx;
	}
	.price-num{
		font-size: 40rpx;
		font-weight: bold;
	}
	.f-down-r{
		padding-left: 32rpx;
		font-size: 24rpx;
		color: #898989;
	}
	.line-price{
		text-decoration: line-through;
	}
	.f-btn{
		font-size: 30rpx;
		color: #fff;
		padding: 16rpx 40rpx;
		background-color: #01b6bc;
		border-radius: 50rpx;
	}
	
	

</style>
